<template>
  <view class="contenter">
    <view class="head u-flex flex_bt">
        <view class="name">{{store.name}}</view>
        <view></view>
    </view>
    <view class="content">
      <view class="sreach u-flex flex_bt" >
        <view class="u-flex">
          <view class="icon">
            <u-icon name="search"  color="#999999" size="30"></u-icon>
          </view>
          <view>
            <u-input :clearable="false" v-model="search" placeholder="用户姓名/电话" type="text" :border="false" :height="68" />
          </view>
        </view>
        <view class="change" @click="searchChange">搜索</view>
      </view>

      <scroll-view scroll-y style="width: 100%;" @scrolltolower="onreachBottom">
        <view class="item flex flex_bt" v-for="(data,index) in list" :key="index">
          <view class="flex">
              <view>
                <item-image :type="'1'" :img="data.userimg" :size="146"  class="u-margin-right-8"  :fade="false"/>
              </view>
              <view class="nei">
                <view class="name">{{data.nickname}}</view>
                <view>{{data.phone || ''}}</view>
                <view class="time u-flex"><view>上次服务时间：</view><view>{{data.last_time || ''}}</view></view>
                <view class="u-flex"><view>下次服务时间：</view><view>{{data.next_time || ''}}</view>
              </view>
            </view>
            <view  class="detail u-flex flex_j_c" @click="userDetail(data)">查看详情</view>
          </view>
          <view class="loading_text" v-if="list.length>0">
            <text>{{loadingText}}</text>
            <text v-if="list.length <= 0 && !loadingText">暂无数据</text>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  name: "myUser",
  data(){
    return{
      search:'',
      type:2,//1是技师 2是门店
      loadingText:'',
      list:[],
      allpage:'',
      store: {},
      month:'',
      page:1,
    }
  },
  onLoad(option){
    this.setData()
    this.store = uni.getStorageSync('store') || ''
    this.type = uni.getStorageSync('type') || ''
  },
  onReady(){
  //修改标题
  //   uni.setNavigationBarTitle({
  //     title: '新的标题'
  //   });
  },
  methods:{
    //用户列表
    setData(){
      let form = {
        seach:this.search,
        limit:10,
        page:this.page || 1
      }
      let that = this
      this.$api.userList(form).then(res => {
        this.allpage = res.data.last_page
        that.list = [...that.list,...res.data.data]
        that.list.forEach(data=>{
          data.phone = this.phone(data.phone)
        })
      })
    },
    //搜索
    searchChange(){
      this.page = 1
      this.loadingText = ''
      this.list = []
      this.setData()
    },
    //跳转用户详情
    userDetail(data){
        this.$u.route({
          url:'/pagesA/technicianUser/myUserDetail',
          params: {
            data: JSON.stringify(data)
          }
        })

    },
    onreachBottom(){
      if(this.page>=this.allpage){
        this.loadingText="已经到底啦！"
        return ;
      }else{
        this.loadingText = '加载中....'
      }
      this.page ++
      this.setData()
    },
  },
}
</script>

<style scoped lang="scss">
  .head{
    background: url("/static/user/my-user.png") no-repeat;
    background-size: 100%;
    height: 100rpx;
    padding: 0 32rpx;
    font-size: 28rpx;
    color: white;
    background-position: 0px 8rpx;
  }
  .content{
    margin:0 32rpx;
    .sreach{
      background: white;
      margin-top: 20rpx;
      box-shadow: 0px 0px 12rpx rgba(0, 0, 0, 0.16);
      height: 68rpx;
      border-radius: 8rpx;
      padding: 0 20rpx;
      .icon{
        margin-right: 16rpx;
      }
      .change{
        font-size: 28rpx;
        font-weight: bold;
        color: #0F4C3A;
      }
    }
    .item{
      background: #FFFFFF;
      box-shadow: 0px 0px 12rpx rgba(0, 0, 0, 0.16);
      border-radius: 12rpx;
      margin-top: 20rpx;
      margin-left: 10rpx;
      margin-right: 10rpx;

      padding: 20rpx;
      .nei{
        margin-left: 20rpx;
        font-size: 24rpx;
        color: #555555;
        .name{
          font-size: 36rpx;
          color: #4B4B4B;
          margin-bottom: 20rpx;
        }
        .time{
          margin-top: 30rpx;
          margin-bottom: 10rpx;
        }
      }
      .detail{
        margin-left: 10rpx;
        width: 130rpx;
        height: 62rpx;
        background: #45806E;
        color: white;
        font-size: 24rpx;
        border-radius: 8rpx;
        margin-top: 40rpx;
      }
    }
  }
</style>